<template>
	<view class="page">
		<Header :title="'商品详情'"  ></Header>
		
		<swiper :autoplay="true" :interval="3000" :duration="1000" style="width: 750rpx;height: 750rpx;">
			<swiper-item v-for="(item,i) in mood.slideshowOssId">
				<image :src="item" mode="aspectFill" style="width:100%;height: 100%;"></image>
			</swiper-item>
		</swiper>
		<view class="introduce_box">
			<view class="introduce_box_big">
				<view class="priceBox">
					<view class="price">
						￥{{mood.unitPrice}}</span>
					</view>
					<view class="buyOut" style="margin-top: 10rpx;">销量：{{mood.sales}}</view>
				</view>
				<view class="nameBox">
					<view class="proName">
						{{mood.title}}
					</view>
					<button class="shareBtnBox" open-type="share">
						<image class="shareIcon" src="@/static/index/fenxiang.png" mode="aspectFill"></image>
						<view class="shareBtn">分享</view>
					</button>
				</view>
			</view>

		</view>
		<view class="number_box">
			<view class="number_boxflx">
				<view class="" style="font-size:30rpx;">购买数量</view>
				<u-number-box v-model="number" @change="valChange" :color1="'#fff'" :input-width="40" :input-height="40"
					:bgColor1="'#21B070'"></u-number-box>
			</view>
		</view>
		<view class="show_box">
			<view class="show_szie">商品介绍</view>
			<rich-text :nodes="mood.introOssId"></rich-text>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<image v-if="mood.isDel==1" class="yishixiao" src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/ebe9f2ce1b002c30ca569cfaeeed48a.png" mode="aspectFill"></image>
		<view class="textBox2" v-if="mood.isDel==1">
			商品已经下架啦~看看别的吧~
		</view>
		<view class="buyBox">
			<view class="iconBtnBox">
				<view class="iconBtn" @click="goToPage('首页')">
					<view class="iconfont iconStyle icon-shouye"></view>
					<view class="btnText">首页</view>
				</view>
				<view class="iconBtn" @click="goToPage('购物车')">
					<view class="iconfont iconStyle icon-gouwuche"></view>
					<view class="btnText">购物车</view>
				</view>
			</view>
			<view class="carAndBuy" :class="{'disabled':mood.isDel==1}">
				
				<view class="carBtn"  @click="goToPage('加入购物车')">加入购物车</view>
				<view class="buyBtn"  @click="toconfirm">立即购买</view>
			</view>
		</view>
		<!-- 	<view class="bottom_box_button" @click="toconfirm">立即购买</view> -->
		<!-- <view class="bottom_box"> -->
		<!-- 		<view class="bottom_box_one">
				<image src="../../../static/logo.png" mode="aspectFill"></image>
				<view class="">店铺</view>
			</view>
			<view class="bottom_box_one" style="margin-left: 85rpx;">
				<image src="../../../static/logo.png" mode="aspectFill"></image>
				<view class="">收藏</view>
			</view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				number: 1,
				count: 5,
				value: 2,
				background: {
					backgroundColor: '#21B070',
				},
				mood: null,
				shareType:'商品分享'

			}
		},
		onLoad(e) {
			this.id = e.id
			this.cread()
		},
		components:{
			Header
		},
		methods: {
			goToPage(type){
				let url
				
				switch(type){
					case '加入购物车':
						let that=this
						this.$utils.throttle(function(){
							let params={
								productId:that.id,
								buyCount:that.number
							}
							that.$api.request('manage/cart/add','post',params).then(res=>{
								if(res.code==200){
									uni.showToast({
										title: '加入购物车成功',
										duration: 1000
									});
								}
							})
						},500)()
						
					break;
					case '购物车':
						url='/pages/home?path=pages/shop/showCar/showCar'
						uni.redirectTo({
							url
						})
					break;
					case '首页':
						url='/pages/home'
						uni.redirectTo({
							url
						})
					break;
				}
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
		async	toconfirm() {
				
				let res = await	this.$api.request('pay/order/create', 'post',{scence:2,orderType:1,productId:this.id,buyCount:this.number})
				if(res.code=='200'){
					let data = {
						number: this.number,
						id: this.id,
						unitPrice: this.mood.unitPrice,
						name: this.mood.name,
						coverPictureId: this.mood.coverPictureId,
						typeId: this.mood.typeId,
						buyId:res.data
					}
					data = JSON.stringify(data)
					uni.setStorageSync('shopMood', data)
					uni.navigateTo({
						url: '/pages/index/shopDate/buyshop'
					})
				}
				
				
			},
			async cread() {
				//商品详情
				let res = await this.$api.request('manage/product/' + this.id)
				this.mood = res.data
				this.mood.slideshowOssId = this.mood.slideshowOssId.split(',')
				let text = this.mood.introOssId
				this.mood.introOssId = text.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;"')
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		background-color: #f5f5f5;
	}
	.yishixiao{
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		height: 400rpx;
		width: 400rpx;
	}
	.number_boxflx {
		display: flex;
		justify-content: space-between;
		margin:20rpx auto 0;
		border-radius: 20rpx;
	}

	.number_box {
		width: 710rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.textBox2{
		width: 100%;
		position: fixed;
		height: 70rpx;
		bottom: 98rpx;
		color:#fff;
		font-weight: bold;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #505050;
		
	}
	.buyBox {
		padding-right:20rpx;
		box-sizing: border-box;
		width: 100%;
		height:98rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		background-color: #fff;
		box-shadow: 0rpx 2rpx 5rpx 0rpx #000;
		
		.iconBtnBox{
			flex:1;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.iconBtn {
				height:100%;
				width: calc(100% / 2);
				padding: 7rpx 0rpx 9rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.iconStyle {
					font-size: 41rpx;
					color: #333333;
				}
			
				.btnText {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
		

		.carAndBuy {
			display: flex;
			margin-left: auto;
			
			.carBtn {
				width: 227.5rpx;
				height: 67rpx;
				text-align: center;
				line-height: 67rpx;
				background: linear-gradient(-49deg, #FCBE5D, #F47C3A);
				border-radius: 34rpx 0rpx 0rpx 34rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.buyBtn {
				width: 227.5rpx;
				height: 67rpx;
				text-align: center;
				line-height: 67rpx;
				background: linear-gradient(-49deg, #FE471E, #D40101);
				border-radius: 0rpx 34rpx 34rpx 0rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			&.disabled{
				.carBtn{
					pointer-events: none;
					opacity: 0.5;
				}
				.buyBtn{
					pointer-events: none;
					opacity: 0.5;
				}
			}
		}
	}

	.bottom_box_button {
		width: 426rpx;
		height: 65rpx;
		text-align: center;
		line-height: 65rpx;
		color: #fff;
		border-radius: 32.5rpx;
		background-color: #FF9329;
		margin-right: 20rpx;
		position: fixed;
		bottom: 3%;
		left: 23%;
	}

	.bottom_box_one image {
		width: 40rpx;
		height: 40rpx;
	}

	.bottom_box_one {
		text-align: center;
		font-size: 22rpx;
		margin-left: 40rpx;
	}

	.bottom_box {
		width: 750rpx;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		padding-top: 15rpx;
		position: fixed;
		bottom: 0%;
	}

	.introduce_box {
		width: 710rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		margin:20rpx auto 0;
		padding: 30rpx 20rpx 35rpx 32rpx;
		position: relative;
		margin-bottom: 20rpx;
		.introduce_box_big{
			.priceBox{
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #DC1010;
				}
				.buyOut{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
			.nameBox{
				display: flex;
				align-items: center;
				.proName{
					flex-wrap: wrap;
					width: 550rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.shareBtnBox{
					flex:1;
					justify-content: flex-end;
					padding: 0;
					margin:0;
					display: flex;
					align-items: center;
					background-color:#fff;
					&::before{
						content: ' ';
						width: 1rpx;
						height: 26rpx;
						background: #DCDCDC;
						margin-right: 13rpx;
					}
					&::after{ border: none;} 
					.shareIcon{
						width: 20rpx;
						height:20rpx;
						margin-right: 11rpx;
					}
					.shareBtn{
						border: none;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}

	.show_box {
		width: 710rpx;
		background-color: #fff;

		margin:20rpx auto;
		border-radius: 10rpx;
		padding: 20rpx 20rpx;

	}

	.comment_box_img {
		display: flex;
		flex-wrap: wrap;
	}

	.comment_box_img image {
		width: 30%;
		height: 200rpx;
		margin-right: 15rpx;
		margin-top: 20rpx;
	}

	.show_szie {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.comment_box_lei {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}

	.comment_box_count {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.comment_box_time {
		font-size: 28rpx;
		color: #999999;
	}

	.comment_user_head {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
	}

	.comment_box_top {
		display: flex;
		justify-content: space-between;
	}

	.xian {
		border-bottom: #999999 1rpx solid;
		width: 660rpx;
		margin-top: 20rpx;
	}

	

	.comment_box {
		margin-top: 30rpx;
	}

	
</style>